.metadata-graph {
  &-drawer-wrapper {
    .metadata-graph-drawer {
      &-title {
        font-family:
          'PingFangSC-Medium',
          'Microsoft YaHei Bold',
          '微软雅黑',
          Arial,
          sans-serif;
        width: 115px;
        font-weight: bold;
        margin-bottom: 16px;
        text-align: right;
        word-break: keep-all;
      }

      &-manipulations,
      &-options {
        margin-bottom: 32px;
        display: flex;
        align-items: center;

        &-name {
          width: 125px;
          margin-right: 43.9px;
          text-align: right;
          color: #333;
          font-size: 14px;
          word-break: keep-all;
          line-height: 32px;
        }

        &-expands {
          font-size: 14px;
          color: #333;
        }
      }
    }
  }

  &-view-wrapper {
    height: calc(100vh - 222px);
    overflow: hidden;
  }

  &-view {
    margin: -1px;
  }

  &-view-empty-wrapper {
    height: calc(100vh - 222px);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &-view-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    color: #333;
  }

  &-loading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

  &-loading-bg {
    width: 144px;
    height: 144px;
    position: relative;
    margin-bottom: 10px;
  }

  &-loading-back {
    position: absolute;
    left: 22px;
    top: 20px;
  }

  &-loading-front {
    position: absolute;
    left: 57.1px;
    top: 52.1px;
    animation: loading-rotate 2s linear infinite;
  }

  @keyframes loading-rotate {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  &-property-manipulation {
    font-size: 14px;
    color: #2b65ff;
    cursor: pointer;

    &:hover {
      color: #527dff;
    }

    &:active {
      color: #184bcc;
    }
  }

  &-tooltips {
    background: #fff;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    padding: 16px;
    font-size: 14px;
    color: #333;

    & p {
      margin: 0;
      line-height: 28px;
    }
  }
}

/* override */

// refer to index.less in root dir, this should be fixed in future
.metadata-graph-drawer-wrapper {
  .new-fc-one-input-all-container {
    position: relative;
  }
}

.metadata-graph-drawer-options-colors {
  margin-left: 12px;
}

.metadata-graph-drawer-options-color {
  width: 20px;
  height: 20px;
}

.metadata-graph-drawer-options .metadata-graph-drawer-options-color {
  margin-top: 6px;
}

// refer to NewVertexType.less, color option style in dropdown
.new-fc-one-select-dropdown-menu-container .metadata-graph-drawer-options-color {
  width: 20px;
  height: 20px;
  margin: 6px auto;
}
